<template>
  <!-- 每个模版页必须有一个根节点标签 -->
  <div>
    <!-- 这里就是组件页面显示的内容 -->
    <el-container>
      <el-header class="el-header" style="height: 250px">
        <div>欢迎使用智能电子超市客户端</div>
        <div class="price-content">支付成功({{ count }}s)</div>
        <div></div>
        <div class="el-header-bottom" style="height: 150px">感谢您的光临</div>
      </el-header>

      <el-main
        :style="defaultStyle"
        height="600"
        class="el-main"
        
      >
        <el-row>
          <el-col :span="6" :offset="9"
            ><div class="bgimg">
              <img :src="bgimg" />
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    
    <!-- 提示音 -->
    <welcomeAudioTip
      :audiourl="welcomeAudioTipurl"
      ref="child"
    ></welcomeAudioTip>
  </div>
</template>
<script>
import welcomeAudioTip from "@/components/welcomeAudioTip.vue";
export default {
  name: "PaySuccessView", //定义组件的名称
  components: {
    welcomeAudioTip,
  },
  data() {
    //定义组件内的属性,组件内属性调用方式使用生命周期关键字this 如：this.age
    return {
      welcomeAudioTipurl: require("@/assets/media/pay_success.mp3"), //初始化欢迎提示音,
      defaultStyle: {
        height: window.innerHeight - 220 - 150 + "px", //表格动态高度
      },
      screenHeight: window.innerHeight, //内容区域高度
      bgimg: require("@/assets/img/paymall.png"),
      count:5, //倒计时跳转首页面
    };
  },  
  watch: {
    // 监听screenHeight从而改变table的高度
    screenHeight(val) {
      this.screenHeight = val;
      this.defaultStyle.height = this.screenHeight - 220 - 150;
    },
  },
  mounted() {
    //同样也是组件初始化时使用，mounted方法会在页面完全加载后进行DOM相关的操作，如果使用created，有时初始化效果会失效，一般建议初始化使用mounted   
    this.paySuccessAudioTip(); 
    this.timer();

    // window.onresize:浏览器尺寸变化响应事件
    window.onresize = () => {
      return (() => {
        // window.innerHeight:浏览器的可用高度
        window.screenHeight = window.innerHeight;
        this.screenHeight = window.screenHeight;
      })();
    };
  },
  methods: {
    paySuccessAudioTip() {
      this.welcomeAudioTipurl = require("@/assets/media/pay_success.mp3");
      //调用子组件方法
      this.$refs.child.play();
    },
    timer() {
      const TIME_COUNT = this.count;
      this.timer = setInterval(() => {
        if (this.count > 0 && this.count <= TIME_COUNT) {
          this.count--;          
        } else {
          this.show = true;
          clearInterval(this.timer);
          this.timer = null;
        }
        if(this.count==0){
            this.$router.push("./");
            this.show = true;
           clearInterval(this.timer);
           this.timer = null;
        }
      }, 1000);
    },
  },
};
</script>
<style scoped>
/* 独立组件的样式，写这里，支持标准的css语法 */
.el-header {
  background-color: #409eff;
  line-height: 100px;
  color: #fff;
  font-size: 30px;
  position: relative;
  z-index: 99;
}
.el-header-bottom {
  background-color: #409eff;
  border-radius: 50%;
  position: absolute;
  width: 100%;
  bottom: -75px;
  left: 0;
  z-index: 10;
}

.el-main {
  margin-top: 75px;
  background-color: #fff;
  color: #333;
  text-align: center;
  overflow: auto;
}
.el-footer {
  background-color: #409eff;
  line-height: 60px;
  color: #fff;
}

.price-content {
  font-size: 50px;
}

.message-content {
  background-color: #409eff;
  font-size: 20px;
}

.bgimg {
  margin-top: 70px;
  opacity: 0.7;
}
</style>